<template>
    <div class="business-user">
        <div class="filter">
            <div class="filter-item">
                <div class="filter-item-label">用户名</div>
                <div class="filter-item-value">
                    <el-input v-model="username" placeholder="请输入用户名" />
                </div>
            </div>
            <div class="filter-item">
                <div class="filter-item-label">日期</div>
                <div class="filter-item-value">
                    <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="x"
                    />
                </div>
            </div>
            <div class="filter-item">
                <el-button type="primary" @click="getTableData">搜索</el-button>
                <el-button @click="resert">重置</el-button>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
                v-model:currentPage="now_page"
                v-model:page-size="page_size"
                :page-sizes="[20,30,40,50]"
                :small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="getTableData"
                @current-change="getTableData"
            />
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

let tableData = ref([]);
let username = ref("");
let date = ref(null);
let now_page = ref();
let total = ref();
let page_size = ref();

/**
 * @params boolean 模拟请求和置空  true:请求数据，false 置空
 */
const getTableData = (boolean = true) => {
    console.log("date", date.value);
    let params = {
        username,
        date,
    };
    // 模拟请求
    let res = {};
    if (boolean) {
        res = {
            code: 1,
            data: {
                list: [
                    {
                        id:1,
                        date: "2016-05-03",
                        name: "Tom",
                        address: "No. 189, Grove St, Los Angeles",
                    },
                    {
                        id:2,
                        date: "2016-05-02",
                        name: "Tom",
                        address: "No. 189, Grove St, Los Angeles",
                    },
                    {
                        id:3,
                        date: "2016-05-04",
                        name: "Tom",
                        address: "No. 189, Grove St, Los Angeles",
                    },
                    {
                        id:4,
                        date: "2016-05-01",
                        name: "Tom",
                        address: "No. 189, Grove St, Los Angeles",
                    },
                ],
                page: {
                    now_page: 1,
                    total: 99,
                    page_size: 20,
                },
            },
        };
    } else {
        res = {
            code: 1,
            data: {
                list: [
                    {
                        id:1,
                        date: "2016-05-03",
                        name: "Tom",
                        address: "No. 189, Grove St, Los Angeles",
                    },
                ],
                page: {
                    now_page: 1,
                    total: 99,
                    page_size: 20,
                },
            },
        };
    }

    if (res.code == 1) {
        tableData.value = res.data.list;
        now_page.value = res.data.page.now_page;
        total.value = res.data.page.total;
        page_size.value = res.data.page.page_size;
        ElMessage({
            message: "请求成功",
            type: "success",
        });
    } else {
        ElMessage({
            message: res.msg,
            type: "warning",
        });
    }
};

const handleDetail = (row) => {
    sessionStorage.setItem('business-user_page',JSON.stringify(now_page.value));
    sessionStorage.setItem('business-user_filter',JSON.stringify({
        username:username.value,
        date:date.value
    }));
    router.push({
        name:'businessUsersDetails',
        id:row.id
    });
}

const reset = () => {
    username.value = "";
    date.value = null;
    getTableData();
};

const getSessionData = () => {
    let _page = JSON.parse(sessionStorage.getItem('business-user_page'));

    if(_page){
        let { username: _username, date: _date } = JSON.parse(sessionStorage.getItem('business-user_filter'));
        now_page.value = _page;
        username.value = _username;
        date.value = _date;

        sessionStorage.removeItem('business-user_page');
        sessionStorage.removeItem('business-user_filter');
    }

}

getSessionData();
getTableData(false);
</script>

<style lang="scss" scoped>
.business-user {
    padding-bottom: 30px;
    height: calc(100vh - 101px);
}
.filter {
    width: 100%;
    display: flex;
    &-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        &-label {
            padding-right: 10px;
        }
    }
}
.pagination {
    position: fixed;
    bottom: 10px;
    width: calc(100vw - 24px);
    display: flex;
    justify-content: flex-end;
}
</style>